<template>
  <div>
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="name" />
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        :title="item.label"
        v-for="item in list"
        :key="item.value"
        @click="fn(item.label)"
      />
      <!-- A-Z对应的城市 -->
      <van-index-anchor index="ele" v-for="ele in loList" :key="ele"
        ><span class="word">{{ ele }}</span>
        <van-cell
          :title="item.label"
          v-for="item in poList(ele)"
          :key="item.value"
          @click="fn(item.label)"
        />
      </van-index-anchor>
      <!-- <van-cell :title="" v-for="item in list" :key="item.value" /> -->
    </van-index-bar>
  </div>
</template>

<script>
import { huo, hot } from '@/api/luo'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'Q',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z'
      ],
      list: [],
      sy: [],
      num1: '',
      num2: []
    }
  },
  async created () {
    const res = await hot()

    this.list.push(...res.body)
    const data = await huo()
    console.log(data)
    this.sy.push(...data.body)
    console.log(this.sy)
  },
  computed: {
    loList () {
      return this.indexList.slice(2)
    },
    ...mapState('user', ['name'])
  },
  methods: {
    poList (it) {
      return this.sy.filter(ite => {
        return ite.short.substr(0, 1).toUpperCase() === it
      })
    },
    fn (id) {
      this.$nextTick(() => {
        this.num2 = [...this.list, ...this.sy]
        const num = this.num2.find(item => {
          return item.label === id
        })
        this.num1 = num.label
        this.$store.commit('user/payout', this.num1)
        this.$router.push('/HoHo')
      })
    }
    // ...mapmutations('user', ['payout'])
  }
  // mounted () {
  //   this.lo = this.$route.params.i
  //   this.$refs.re.title = this.lo
  // }
}
</script>

<style scoped lang="less"></style>
